<template>
    <div class="modal fade" id="adviserChangeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<h4 class="modal-title" id="myModalLabel">变更置业顾问</h4>
          	</div>
          	<div class="modal-body">
				<div class="form-horizontal clearfix">
					<div class="form-group  col-sm-4" v-if="!customerPremisesId">
						<select class="form-control" v-model="oldAdviser">
							<option v-for="adviser in oldAdviserList" :value="adviser.adviserUuid" :key="adviser.adviserUuid">{{ adviser.name }}</option>
						</select>
					</div>
					<div class="form-group  col-sm-4" style="line-height: 40px; text-align: center;" v-if="!customerPremisesId">
						<font color="#f97242">关联的所有报备转移至</font>
					</div>
					<div class="form-group  col-sm-4" style="line-height: 40px; text-align: center;" v-if="customerPremisesId">
						<font color="#f97242">请选择新的置业顾问</font>
					</div>
					<div class="form-group col-sm-4" style="position:relative">
						<select class="form-control" v-model="newAdviser">
							<option v-for="adviser in newAdviserList" :value="adviser.adviserUuid" :key="adviser.adviserUuid">{{ adviser.name }}</option>
						</select>
					</div>
				</div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="changeCPAdviser">确定</button>
				<button type="button" class="btn checkedBtn" v-show="btnShow" @click="closeModal">关闭</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<style>
	.property-consultant{
		color: #f87242;
	}
	.property-consultant:hover,
	.property-consultant:focus {
		 color:#ed3f14;
	}
	.view-list-close{
		cursor: pointer;
		font-weight: bold;
		position: absolute;
		right:10px;
		top: 4px;
    	font-size: 20px;
	}
</style>

<script>
import {API, Log, Utils, Service} from '../../../js/base'
import CommonSelect from "../../common/CommonSelect.vue";
	export default{
		//接收父组件的绑定值
		props: {
			premisesId: {
				type: String,
                default: ''  
			},
			customerPremisesId: {
                type: String,
                default: ''            //range/time
            },
			originalAdviser: {
                type: String,
                default: ''            //range/time
            },
			originalAdviserList: {
				type: Array,
				default: () => {
					return {}
				}
			},
			
		},
		components: {
			CommonSelect
		},
		data() {
			return {
				btnShow: true,
				oldAdviserList:[],
				newAdviserList:[],
				// premisesId: '',
				// customerPremisesId: '',
				oldAdviser: '',
				newAdviser: ''
			}
		},
		watch: {
			premisesId(val) {
				console.log(val,99);
                this.premisesId = val
            },
			customerPremisesId(val) {
                this.customerPremisesId = val
            },
			originalAdviser(val) {
                this.oldAdviser = val
            },
			originalAdviserList (val) {
				this.oldAdviserList = val
				this.newAdviserList = val
			},
		},
		methods: {
			changeCPAdviser() {
				var _this = this;
				let premisesId = _this.premisesId;
				let customerPremisesId = _this.customerPremisesId;
				let oldAdviser = _this.oldAdviser;
				let newAdviser = _this.newAdviser;
				if(!customerPremisesId && !oldAdviser){
					layer.msg('请选择原置业顾问', {
						time: 2000
					});
					return;
				}
				if(!newAdviser){
					layer.msg('请选择要变更的置业顾问', {
						time: 2000
					});
					return;
				}
				if(oldAdviser === newAdviser){
					layer.msg('所选置业顾问相同,无需变更', {
						time: 2000
					});
					return;
				}
				Service.Adviser.changeCPAdviser({
					premisesId,
					customerPremisesId,
					oldAdviser,
					newAdviser,
					_this
				}).then(rsp => {
					if(rsp.result === "1"){
						_this.closeModal();
					}
					return rsp
				}).catch(e => {
					return e
				})
			},
			closeModal(){
				this.oldAdviser = ''
				this.newAdviser = ''
				this.$emit("saveAdviserChangeReturn");
				$('#adviserChangeModal').modal('hide')
			}
		}
	}
	
</script>